<template>
  <div class="classroom">
    <el-row type="flex" :gutter="20" align="middle">
      <el-col :span="4">
        <el-select v-model="query.parentCode" placeholder="请选择单位所属区域">
          <el-option
            v-for="item in regionList"
            :key="item.areaCode"
            :label="item.areaName"
            :value="item.areaCode"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :span="4">
        <el-select
          v-model="query.mainBusiness"
          clearable
          placeholder="请选择主营业务"
        >
          <el-option label="餐饮服务" value="餐饮服务"></el-option>
          <el-option label="食品销售" value="食品销售"></el-option>
        </el-select>
      </el-col>

      <el-col :span="6">
        <el-input
          maxlength="50"
          clearable
          v-model="query.search"
          placeholder="请输入社会信用代码/单位名称"
        ></el-input>
      </el-col>


         <el-col :span="4">
          <el-select
            v-model="query.isHaveDirector"
            placeholder="是否有企业负责人"
            clearable
          >
            <el-option
              v-for="item in [
                {
                  label: '未签署',
                  value: '0',
                },
                {
                  label: '已签署',
                  value: '1',
                },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="query.isHaveChiefInspector"
            placeholder="是否有食品安全总监"
            clearable
          >
            <el-option
              v-for="item in [
                {
                  label: '未签署',
                  value: '0',
                },
                {
                  label: '已签署',
                  value: '1',
                },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="query.isHaveFoodSafetyOfficer"
            placeholder="食品安全员是否签署"
            clearable
          >
            <el-option
              v-for="item in [
                {
                  label: '未签署',
                  value: '0',
                },
                {
                  label: '已签署',
                  value: '1',
                },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>













      <el-col :span="2">
        <el-button
          type="primary"
          @click="
            query.pageIndex = 1;
            getList();
          "
          >查询</el-button
        ></el-col
      >
      <el-col :span="2">
        <el-button
          @click="
            query.pageIndex = 1;
            exportList();
          "
          >导出</el-button
        ></el-col
      >
    </el-row>
    <rz-height></rz-height>

    <!-- 区域、品牌名称、主营业务、统一社会信用代码、单位名称、
苏州地区管理机构详细地址、中央厨房/配送中心地址、采购方式（总部(20%)）、门店数、食安指数、注册日期 -->

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="" label="区域"  width="180">
        <template slot-scope="scope">
          <div>
            {{ scope.row.provinceName }}-{{ scope.row.cityName }}-{{
              scope.row.districtName
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="brandName" label="品牌名称">
        <template slot-scope="scope">
          <div>
            {{ scope.row.brandName || "--" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="mainBusiness" label="主营业务"></el-table-column>
      <el-table-column prop="identify" label="统一社会信用代码" width="220">
      </el-table-column>
      <el-table-column prop="unitName" label="单位名称" width="220">
      </el-table-column>
      <el-table-column
        prop="managementAddress"
        label="管理机构详细地址"  width="200"
      ></el-table-column>
      <el-table-column
        prop="centralKitchenAddress"
        label="中央厨房/配送中心地址"
        width="200"
      ></el-table-column>
      <el-table-column  label="采购方式" width="100">

           <template slot-scope="scope">
           <div>
            <span>{{scope.row.purchaseName}}</span> 
              <span v-if="scope.row.purchase==1">
                ({{scope.row.purchaseProportion}}%)
              </span>
           </div>
           </template>

      </el-table-column>
      <el-table-column prop="businessUnits" label="门店数"></el-table-column>
      <el-table-column prop="indexScore" label="精准画像"></el-table-column>
      <el-table-column prop="createDateTimeStr" label="注册日期" width="100">
      </el-table-column>

   <el-table-column
              label="企业负责人"
              prop="productionaddress"
              width="150"
            >
              <template slot-scope="scope">
                <div class="green" v-if="scope.row.directorNameDate != '未签署'">
                 {{
                    scope.row.directorNameDate
                  }}
                </div>
                <div class="red" v-else>未签署</div>
              </template>
            </el-table-column>
            <el-table-column
              label="食品安全总监"
              prop="productionaddress"
              width="150"
            >
              <template slot-scope="scope">
                <div
                  class="green"
                  v-if="scope.row.chiefInspectorNameDate != '未签署'"
                >
                  {{ scope.row.chiefInspectorNameDate }}
                </div>
                <div class="red" v-else>未签署</div>
              </template>
            </el-table-column>
            <el-table-column
              label="食品安全员"
              prop="productionaddress"
              width="180"
            >
              <template slot-scope="scope">
                <div
                  class="green"
                  v-if="scope.row.foodSafetyOfficers != '未签署'"
                >
                  {{ scope.row.foodSafetyOfficers }}
                </div>
                <div class="red" v-else>未签署</div>
              </template>
            </el-table-column>
            <el-table-column label="日管控(完成数)" align="center">
           
                <template slot-scope="scope">
                  <div
                    v-if="scope.row.dispatchTotal"
                    style="
                      text-decoration: underline;
                      cursor: pointer;
                      color: #1890ff;
                    "
                    @click="control('1', '日管控详情', scope.row.workId, '1')"
                  >
                    {{ scope.row.dispatchTotal }}
                  </div>
                  <div v-else>
                    {{ scope.row.dispatchTotal }}
                  </div>
                </template>
            </el-table-column>
            <el-table-column label="周排查(完成数)" align="center">
                <template slot-scope="scope">
                  <div
                    v-if="scope.row.troubleshootingTotal"
                    style="
                      text-decoration: underline;
                      cursor: pointer;
                      color: #1890ff;
                    "
                    @click="control('2', '周排查详情', scope.row.workId, '1')"
                  >
                    {{ scope.row.troubleshootingTotal }}
                  </div>
                  <div v-else>
                    {{ scope.row.troubleshootingTotal }}
                  </div>
                </template>
            </el-table-column>

            <el-table-column label="月调度(完成数)" align="center">
         
                <template slot-scope="scope">
                  <div
                    v-if="scope.row.controlTotal"
                    style="
                      text-decoration: underline;
                      cursor: pointer;
                      color: #1890ff;
                    "
                    @click="control('3', '月调度详情', scope.row.workId, '1')"
                  >
                    {{ scope.row.controlTotal }}
                  </div>
                  <div v-else>
                    {{ scope.row.controlTotal }}
                  </div>
                </template>
            </el-table-column>



      <el-table-column prop="" label="操作" width="80" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.userTel"
            @click="view(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- <table-page :columns="columns" :tableData="tableData">
      <template slot="select">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="10">
            <el-input
              clearable
              v-model="query.safetyTitle"
              placeholder="食安标题"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="query.safetyCategory"
              clearable
              placeholder="食安分类"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in list"
                :key="index"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="query.safetyState" clearable placeholder="状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="待发布" value="0"></el-option>
              <el-option label="已发布" value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-checkbox v-model="query.isrecommendcheck">是否推荐</el-checkbox>
          </el-col>
          <el-col :span="3">
            <el-button
              type="primary"
              @click="findFoodSafetyClassList"
              icon="el-icon-search"
              >查询</el-button
            ></el-col
          >
          <el-col :span="4">
            <el-button type="success" icon="el-icon-plus" @click="addItem"
              >新增</el-button
            >
          </el-col>
        </el-row>
      </template>
      <template slot="safetyState" slot-scope="slotProps">
        <div v-if="slotProps.scope&&slotProps.scope.safetyState == '待发布'" class="red">
          待发布
        </div>
        <div v-else class="green">已发布</div>
      </template>
      <template slot="releaseDate" slot-scope="slotProps">
        <div>
          {{ slotProps.scope&&slotProps.scope.releaseDate || "--" }}
        </div>
      </template>

  <template slot="actions" slot-scope="slotProps">
        <div>
          {{ slotProps.scope}}
        </div>
      </template>
      <template slot="action" slot-scope="slotProps">
        <el-button type="info" size="mini">查看</el-button>
        <el-button type="primary" size="mini">编辑</el-button>
        <el-button type="danger" @click="deleteById(slotProps)" size="mini"
          >删除{{slotProps}}</el-button
        >
      </template>
    </table-page> -->
    <pagination
      :total="total"
      :page.sync="query.pageIndex"
      @pagination="getList"
      v-show="total"
    />
    <!-- <el-dialog
      title="预览"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      destroy-on-close
    >
      <div class="center">
        <vue-qr
          :text="url"
          :margin="0"
          colorLight="#fff"
          :logoScale="0.3"
          :size="200"
        ></vue-qr>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->

      <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      :title="title"
    >
      <inspect
        :classification="classification"
        :taskStatus="taskStatus"
        :unId="unId"
        v-if="dialogVisible"
        :clearable="true"
      ></inspect>
    </rz-dialog>
  </div>
</template>

<script>
import vueQr from "vue-qr";

import { findWorkstationMapList,exportQueryWorkstationMap } from "@/api/modules/chain";

export default {
  components: {
    vueQr,
      inspect: () => import("@/views/enterprise/components/inspectChain"),
  },
  props: {},
  data() {
    return {
      // url: "1223",
         taskStatus: "1",
      classification: "1",
      title: "",
      unId: "",
      dialogVisible: false,
      query: {
        brandNameState: "0",
        centralKitchenState: "0",
        mainBusiness: "",
        pageIndex: 1,
        pageSize: 10,
        parentCode: "320500000000",
        purchase: "0",
        search: "",
        // searchTwo: "",
        storeType: "",
        isHaveDirector:"",
        isHaveChiefInspector:"",
        isHaveFoodSafetyOfficer:"",
      },
      total: 0,
      list: [],
      tableData: [],
      regionList: [],
    };
  },
  computed: {},
  created() {
       if (this.$route.query.code) {
      this.query.parentCode = this.$route.query.code;
    } else {
      this.query.parentCode = "320500000000";
    }
    this.findListByParentCode()
    this.getList();
  },
  mounted() {},
  methods: {
    addItem() {
      this.$router.push("/foodSafety/policy/addPolicy");
    },
    getList() {
      findWorkstationMapList(this.query)
        .then((res) => {
          this.tableData = res.data;
          this.total = res.totalCount;
        })
        .catch((res) => {
          console.log(res);
        });
    },
    edit(e) {
      this.$router.push(`/foodSafety/policy/addPolicy?id=${e.id}`);
    },
    view(e) {
      this.$router.push(`/chain?id=${e.workId}`);
      
    },
    pagination(e) {
      console.log(e);
    },
    deleteById(e) {
      this.$confirm("确定删除这一项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((red) => {
          this.$http
            .deleteByIdPolicy({
              params: {
                id: e.id,
              },
            })
            .then((res) => {
              if (res.code == 200) {
                this.pageIndex = 1;
                this.findFoodSafetyClassList();
                this.$success(res.msg);
              } else {
                this.$error(res.msg);
              }
            })
            .catch((res) => {
              console.log(res);
            });
        })
        .catch((res) => {
          console.log(res);
        });
    },
    pickerChage(e) {
      if (e) {
        this.query.startDate = e[0];
        this.query.endDate = e[1];
      } else {
        this.query.startDate = "";
        this.query.endDate = "";
      }
    },
    // onView(e) {
    //   this.url = e.id;
    //   this.dialogVisible = true;
    // },
    // handleClose() {
    //   this.dialogVisible = false;
    // },
      findListByParentCode() {
      this.$http
        .findListByParentCode({
          parentCode: this.query.parentCode,
        })
        .then((res) => {
          res.data.forEach((res) => {
            if(res.areaCode=='320500') {
              res.areaName='全部'
            }
          })
          this.regionList = res.data;
        });
    },
        exportList() {
      exportQueryWorkstationMap(this.query).then((res) => {
        var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download =
          "导出连锁店" + new Date().getTime() + ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
        control(classification, title, unId, taskStatus) {
      this.classification = classification;
      this.title = title;
      this.unId = unId;
      this.taskStatus = taskStatus;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang="scss">
.classroom {
  padding: 20px;
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>
